<template> 
    <div class="editor-container">
        <QuillEditor 
            v-model:content="content"
            :toolbar="toolbar"
            contentType="html"
            :placeholder="placeholder"
        />
    </div>
</template>

<script setup lang="ts">
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { ref, watch } from 'vue'

const props = defineProps<{
    modelValue: string
    placeholder: string
}>()

const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
}>()

const content = ref(props.modelValue)

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
    if (newVal !== content.value) {
        content.value = newVal
    }
})

// 监听内部值变化
watch(() => content.value, (newVal) => {
    emit('update:modelValue', newVal)
})

const toolbar = [
    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
    [{ 'script': 'sub'}, { 'script': 'super' }],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
    ['link', 'image']
]
</script>

<style scoped lang="scss">
.editor-container {
    border-radius: 0.5rem;
    overflow: hidden;
}

:deep(.ql-editor) {
    height: 30rem;
    overflow-y: auto;
}
:deep(.ql-toolbar.ql-snow) {
    border-radius: 0.5rem 0.5rem 0 0;
}
:deep(.ql-container.ql-snow) {
    border-radius: 0 0 0.5rem 0.5rem;
}
</style>